<template>
<!-- Animated submit button with tweenline -->

<div class="submit-container">
  <div @click="clickedSubmit"
       ref="submit-btn"
       :class="buttonClass"
       class="submit-btn">
    <span v-show="!clicked">Submit</span>
    <span v-show="loaded">Check Your Email</span>
    <span v-show="error">Error Try Again</span>
  </div>
  <!--  grey circle  -->
  <svg v-if="loading" class="loader-svg">
    <path stroke="#CCCCCC" fill="none" stroke-width="4"
    d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5"></path>
  </svg>
  <!--  green circle  -->
  <!--  circumference  -->
  <!-- 3.1416 * 50 = ~157 -->
  <svg v-if="loading" class="loader-svg">
    <path stroke="#20BF7E" fill="none" stroke-width="4"
    d="M25,2.5A22.5,22.5 0 1 1 2.5,25A22.5,22.5 0 0 1 25,2.5"
    stroke-dasharray="157" :stroke-dashoffset="loaderOffset"></path>
  </svg>
</div>

</template>

<script>
/* eslint-disable */
const circumference = 157

export default {
  data() {
    return {
      error: false,
      clicked: false,
      loading: false,
      loaded: false,
      loaderOffset: circumference
    }
  },
  methods: {
    clickedSubmit() {
      // no actions until loading finishes
      if (this.clicked && !this.error)
        return

      // restart when button finished the animation
      if (this.error) {
        this.restart()
        return
      }

      // start loading animation 
      this.clicked = true

      // when css transition ends, execute animateLoader method
      this.$refs['submit-btn'].addEventListener("transitionend",
        this.animateLoader, false);
    },
    animateLoader() {
      this.loading = true
      // remove transition end event listener
      this.$refs['submit-btn'].removeEventListener("transitionend",
        this.animateLoader, false);

      // animate the loaderOffset property,
      // on production this should be replaced 
      // with the real loading progress
      TweenLite.to(this, 2, {
        loaderOffset: 0,
        ease: Power4.easeInOut,
        onComplete: this.errorLoading // execute this method when animation ends
      })
    },
    completeLoading() {
      this.loading = false
      this.loaded = true
    },
    errorLoading() {
      this.loading = false
      this.error = true
    },
    restart() {
      this.clicked = false
      this.loaded = false
      this.error = false
      this.loaderOffset = circumference
    }
  },
  computed: {
    buttonClass() {
      // if (this.loaded) {
      //   return 'loaded'
      // }
      // console.log(this.loaded);


      if (this.loaded) {
        return 'loaded'
      }

      if (this.error) {
        // console.log(this.error);
        return 'error'
      }

      if (this.clicked) {
        return 'round'
      }

     

      return ''
    }
  }
}
</script>

<style>
.submit-container {
  position: relative;
  margin: 80px;
}

.submit-btn {
  width: 300px;
  color: #20BF7E;
  font-size: 20px;
  font-family: Arial;
  text-align: center;
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  /* border: solid #20BF7E 4px; */
  text-decoration: none;
  cursor: pointer;
  border-radius: 25px;
  transition: width .3s, margin .3s, background-color .3s, color .3s;
}

.submit-btn:hover {
  background-color: #20BF7E;
  color: white;
}

.submit-btn.round {
  margin-left: 150px;
  border-color: #CCCCCC;
  background: white;
  
  /*  circle should be 50px width & height */
  /* borderLeft + paddingLeft + paddingRight + borderRight  */
  /* 4 + 20 + 20 + 4 = 48 + 2 = 50 */
  width: 2px; 
  /* borderTop + paddingTop + paddingBottom + borderBottom  */
  /* 4 + 10 + 10 + 4 = 28 + 22 = 50 */
  height: 22px;
}
.submit-btn.loaded {
  color: white;
  background-color: #20BF7E;
}

.submit-btn.error {
  color: white;
  background-color: red;
}

.loader-svg {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 150px;
  width: 150px; 
  height: 50px; 
  transform-origin: 50px 50px 50px;
}
</style>
